<template>
	<view>
		<!-- 顶部占位栏（适配状态栏 + 导航栏） -->
			<!-- <view :style="{ height: statusBarHeight + 'px' }"></view> -->
			
		<view class="content">
		
		  <!-- 顶部图片 -->
		  <view class="up">
		    <image mode="widthFix" src="@/static/img/home.png" class="header-image"></image>
		  </view>
		  
		  <!-- 轮播图 -->
		  <view class="banner-container">
		    <u-swiper 
		      :list="bannerList" 
		      previousMargin="30" 
		      nextMargin="30" 
		      circular 
		      bgColor="#98A09F"
		      :autoplay="true" 
		      radius="12"
		      height="150"
		      indicator
		      indicatorMode="line"
		      indicatorActiveColor=""
		    ></u-swiper>
		  </view>
		  
		  <!-- 搜索栏 -->
		
			<!-- 搜索栏部分 -->
			<view class="search-container" @click="toSearch()">
			  <view class="search-wrapper">
			    <u-icon name="search" size="40rpx" color="#DCC4B9" class="search-icon"></u-icon>
			    <text class="search-placeholder">搜索非遗……</text>
			  </view>
			</view>
		  
		  <!-- 资讯 -->
		  <view class="knowledge-container">
		    <view class="section-title seal-style">
		      <view class="seal-icon">
		        <text class="seal-text">非遗</text>
		      </view>
		      <text class="section-title-text">非遗资讯</text>
		      <view class="divider-line"></view>
		    </view>
		    
		    <view class="knowledge-grid">
		      <view 
		        class="knowledge-card" 
		        v-for="(knowledge, index) in knowledgeList" 
		        :key="index"
		        @click="toKnowledgeItem(knowledge.informationId)"
		      >
		        <view class="card-image-container">
		          <u--image 
		            :showLoading="true" 
		            :src="knowledge.infromationImg" 
		            width="100%"
		            height="180px"
		            radius="8"
		            class="knowledge-image"
		            mode="aspectFill"
		          ></u--image>
		          <!-- <view class="image-overlay"></view> -->
		        </view>
		        <view class="card-content">
		          <text class="knowledge-title">{{knowledge.informationTitle}}</text>
		          <view class="knowledge-meta">
		            <u-icon name="clock" size="14" color="#999"></u-icon>
		            <text class="knowledge-time">{{knowledge.informationTime}}</text>
		          </view>
		        </view>
		      </view>
		    </view>
		  </view>
		  
		  <!-- 悬浮预约按钮 -->
		
			<view class="d3-btn" @click="toBook">
			  <image src="/static/img/map.png"  mode="aspectFit" class="d3-image"></image>
			</view>
		  
		  <!-- 没有更多 -->
		  <view class="loadmore-container">
		    <u-loadmore 
		      status="nomore" 
		      loadmoreText="上拉加载更多" 
		      nomoreText="已经到底啦~" 
		      color="#DCC4B9" 
		      lineColor="#DCC4B9" 
		      dashed 
		      line 
		    />
		  </view>
		</view>
	</view>
 
</template>


<script>
		import { mapGetters } from 'vuex'
	export default {
		 data() {
		    return {
				statusBarHeight: 0,
		      borderTop: false,
		      inactiveColor: '#909399',
		      activeColor: '#5098FF',
		      status: 'loadmore',
		      bannerList: [],
		      knowledgeList: [],
		      keyword: '',
		      aLis: [], //展示的数据
		      bList: [] //所有的数据
		    }
		  },
		onLoad() {
	
		
			this.getKnowledgeList();
			this.getBanner();



		},
		computed: {
			...mapGetters([
				'tabBerList'
			])
		},
		methods: {
			// 加载资讯
			getKnowledgeList() {
				uni.request({
					url: this.$BASE_URL.baseUrl + '/home/information/list',
					success: (res) => {
					
						this.knowledgeList = res.data.rows;
					
					}
				});
			},
			//加载轮播图
			getBanner() {
				uni.request({
					url: this.$BASE_URL.baseUrl + '/home/banner/list',
					success: (res) => {
						this.bannerList = res.data.rows.map(element => element.bannerImg);
					}
				})
			},
			// 页面跳转
			toSearchPage() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			toBook() {
				uni.navigateTo({
					url: '/pages/map/map'
				})
			},
			toKnowledgeItem(id) {
				uni.navigateTo({
					url: `/pages/information/information?id=${id}`
				})
			},
			toSearch(){
				// console.log('')
				uni.navigateTo({
					url: '/pages/search/search-index'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
/* 全局样式 */
page {
  background-color: #762428;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.content {
	padding-top: 10rpx;
  padding-bottom: 120rpx;
  background: linear-gradient(to bottom, #762428 0%, #762428 300rpx);
}

/* 顶部图片  */
.up {
  width: 100%;
  position: relative;
  z-index: 1;
  padding-top: 30rpx;
  padding-bottom: 80rpx; /* 减少底部间距 */
  overflow: hidden; /* 隐藏溢出部分 */
  
  .header-image {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.05); /* 轻微放大图片 */
    transform-origin: bottom center;
    margin-top: -10rpx; /* 上移图片 */
    filter: drop-shadow(0 10rpx 20rpx rgba(0, 0, 0, 0.2)); /* 添加阴影效果 */
  }
  
  /* 添加渐变遮罩 */
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background: linear-gradient(to bottom, transparent, #762428 80%);
    z-index: 2;
  }
}

/* 轮播图 -  */
.banner-container {
  margin: -80rpx 30rpx 0; /* 上移 */
  position: relative;
  z-index: 2;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(118, 36, 40, 0.3);
}
/* 搜索栏样式 */
.search-container {
  margin: 40rpx 30rpx 30rpx;
  position: relative;
  z-index: 2;
  
  .search-wrapper {
    height: 88rpx; /* 增大高度 */
    background: rgba(255, 255, 255, 0.95);
    border-radius: 44rpx; /* 完全圆形 */
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    box-shadow: 0 8rpx 30rpx rgba(118, 36, 40, 0.15);
    border: 1rpx solid rgba(220, 196, 185, 0.3);
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 4rpx 15rpx rgba(118, 36, 40, 0.1);
    }
  }
  
  .search-icon {
    margin-right: 20rpx;
    flex-shrink: 0;
  }
  
  .search-placeholder {
    font-size: 32rpx;
    color: black;
    letter-spacing: 0.5rpx;
  }
}

/* 响应式调整 */
@media (min-width: 768px) {
  .search-container {
    margin: 50rpx auto 40rpx;
    max-width: 80%;
    
    .search-wrapper {
      height: 100rpx;
      border-radius: 50rpx;
    }
    
    .search-placeholder {
      font-size: 36rpx;
    }
  }
}
/* 资讯区域 */

.knowledge-container {
  margin: 40rpx 20rpx 0;
  padding: 30rpx 20rpx;
  background-color: #FFF;
  border-radius: 20rpx;
  box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
 .section-title.seal-style {
	 padding-bottom: 20rpx;
   display: flex;
   align-items: center;
   margin: 40rpx 30rpx 30rpx;
   position: relative;
   
   .seal-icon {
     width: 80rpx;
     height: 80rpx;
     background: #762428;
     border-radius: 8rpx;
     display: flex;
     justify-content: center;
     align-items: center;
     transform: rotate(-15deg);
     margin-right: 20rpx;
     box-shadow: 0 4rpx 12rpx rgba(118, 36, 40, 0.3);
     
     .seal-text {
       color: #F8F5F2;
       font-size: 32rpx;
       font-weight: bold;
       font-family: "STXingkai", "KaiTi", serif;
     }
   }
   
   .section-title-text {
     font-size: 45rpx;
     font-weight: bold;
     color: #762428;
     letter-spacing: 2rpx;
     position: relative;
     z-index: 1;
     background: linear-gradient(to right, #762428, #A53D3D);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   .divider-line {
     flex: 1;
     height: 2rpx;
     background: linear-gradient(to right, #DCC4B9, transparent);
     margin-left: 20rpx;
   }
 }
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.knowledge-card {
  background: #FFF;
  border-radius: 12rpx;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  
  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}
// .knowledge-card::before {
//     content: '';
//     position: absolute;
//     width: 40rpx;
//     height: 40rpx;
//     background:#98A09F;
//     z-index: 2;
//     clip-path: polygon(0 0, 20% 0, 0% 80%, 0 100%, 80% 100%, 100% 20%, 100% 0);  /* 如意纹形状示例路径，可调整 */
// }
.card-image-container {
  position: relative;
  
  .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60rpx;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  }
}

.knowledge-image {
  display: block;
}

.card-content {
  padding: 20rpx 16rpx;
  
  .knowledge-title {
    font-size: 28rpx;
    // color: #333;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
  }
  
  .knowledge-meta {
    display: flex;
    align-items: center;
    margin-top: 15rpx;
    
    .knowledge-time {
      font-size: 22rpx;
      color: #999;
      margin-left: 8rpx;
    }
  }
}

/* 悬浮按钮 */.d3-btn {
  position: fixed;
  right: 30rpx;
  bottom: 150rpx;
  z-index: 100;
  width: 180rpx;
  height: 180rpx;
  perspective: 1000rpx;
  
  .d3-image {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.3s;
    filter: drop-shadow(0 10rpx 20rpx rgba(118, 36, 40, 0.4));
  }
  
  &:active .d3-image {
    transform: translateZ(-20rpx);
  }
}
/* 加载更多 */
.loadmore-container {
  margin: 40rpx 0;
  padding-bottom: 40rpx;
}
</style>